<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="format-detection" content="telephone=no" />
    <title>首页</title>
    <meta content="" name="keywords" />
    <meta content="" name="description" />
    <meta content="" name="copyright" />
    <meta content="" name="author" />
    <meta name="robots" content="noarchive">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="js/urlTool.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e88c378a8cefd5af10405e60cb496c0f&plugin=AMap.DistrictSearch"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="js/template-web.js"></script>
    <style>
        .amap-logo {
            opacity: 0;
        }

        .amap-copyright {
            opacity: 0;
        }
    </style>
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/style.css">
</head>

<body class="bgf8">
    <!--头部-->
    <!-- <div class="header">E卡通</div> -->
    <!--//头部-->

    <div class="pb120">
        <!--//购买e卡通-->
        <div class="buycar">
            <a href="mydata.html"><img src="temp/1.jpg"></a>
        </div>
        <!-- 地图开始 -->
        <!-- <div class="mapcont bgfff pt30 pb20">
				<div><img src="temp/map.png"></div>
			</div> -->
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <!-- <p class="c333" id="fanhui">fanhui</p> -->
        <!-- <a href="javascript:;" onClick="javascript:history.back(-1);" id="fanhui" class="c333">返回上一页</a> -->
        <!-- <p class="clear bgfff"><a href="javascript:history.go(-1);" id="fanhui" class="c333 p20 fl">返回上一页</a></p> -->
        <p class="clear bgfff"><a href="index.html" id="fanhui" class="c333 p20 fl">返回全国地图</a></p>
        <div style="height:320px;overflow: hidden;" id="main" class="bgfff"></div>
        <!-- 地图结束 -->
        <p class="c999 pl20 pr20 pb20 bgfff">本地图只代表自驾车主能到达区域，不代表中国实际疆域</p>

        <!-- 消息滚动开始 -->
        <div class="bgfff pt20 pb20 mt20 clear" id="noticeShow">
            <div class="fl c0b newtitle tc"><img src="temp/new.jpg" class="mt10"></div>
            <div id="noticeWr">
                <!-- <div class="txtMarquee-top fl pl20 bl">
                    <div class="bd">
                        <ul class="infoList">
                            <li><a href="#1" target="_blank">中国打破了世界软件巨头规则数理化老师竟也看学习资料？</a></li>
                        </ul>
                    </div>
                </div> -->
            </div>

            <div class="fl c0b newmore mt20 tc"><img src="temp/jiantou.png"></div>
        </div>
        <!-- 消息滚动结束 -->


        <ul class="role mt20 mb20 clear">
            <li class="car">
                <a id="car_register" href="myCenter.html">
                    <p class="fl tc">
                        <img src="temp/car.png">
                    </p>
                    <p class="fl">自驾车主</p>
                </a>
            </li>

            <li class="view">
                <a id="view_register" href="viewCenter.html">
                    <p class="fl tc">
                        <img src="temp/view.png">
                    </p>
                    <p class="fl">景区</p>
                </a>
            </li>

            <li class="union">
                <a id="union_register" href="unionCenter.html">
                    <p class="fl tc">
                        <img src="temp/union.png">
                    </p>
                    <p class="fl">发行单位</p>
                </a>
            </li>
        </ul>

        <!-- 消息列表开始 -->
        
        <a href="mydata.html" class="listnewsbg bb">
            <dl class="clear p20">
                <dt class="fl listnews"><img src="temp/cardcolorbg.png" /></dt>
                <dd class="fl listnewstext">
                    <p class="t-ell">自驾车主卡</p>
                    <p>价格：88元</p>
                </dd>
            </dl>
        </a>
        <div class="bgfff" id="ticketList">
        </div>
        <!-- 消息列表结束 -->
    </div>

    <!--底部-->
    <div class="footerpage"></div>
    <!--//底部-->
    <script id="notice_tpl" type="text/html">
        <div class="txtMarquee-top fl pl20 bl">
            <div class="bd">
                <ul class="infoList">
                    {{each data}}
                    <li><a href="noticeinfo.html?noticeId={{$value.noticeId}}" target="_blank">{{$value.noticeTitle}}</a></li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </script>
    <script id="ticket_tpl" type="text/html">
        {{each data}}
        <a href="ticketinfo.html?id={{$value.id}}" class="listnewsbg bb">
            <dl class="clear p20">
                <dt class="fl listnews"><img src="{{fileUrl}}{{$value.proPicList[0].attPath}}" onerror="imgerr(this)" /></dt>
                <dd class="fl listnewstext">
                    <p class="t-ell">{{$value.proName}}</p>
                    <p>价格：{{ $value.proMemberPrice / 100 }}元</p>
                </dd>
            </dl>
        </a>
        {{/each}}
    </script>
    <script src="js/zepto.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/common.js"></script>

    <script>
        $(".footerpage").load("footer.html", '', function () {
            $('#home').addClass("select-two").children().attr("class", "homeclick");
        });
        indexShowCenter();
        // jQuery(".txtMarquee-top").slide({
        //     mainCell: ".bd ul",
        //     autoPlay: true,
        //     effect: "topMarquee",
        //     vis: 2,
        //     interTime: 100
        // });
        var msg;
        // 查询相关地区的景区数量
        function getNum(province) {
            sm.req({
                url: '/common/getProvinceMsg',
                dataType: 'json',
                type: 'get',
                async: false,
                data: {
                    province: province
                },
                done: function (res) {
                    msg = res.data;
                }
            })
        }

        $(function () {
            getMap('china_full')
        })

        function getMap(province) {
            $('#main').html('<div id="' + province + '" style="height:320px"></div>');
            getNum(province);
            var myChart = echarts.init(document.getElementById(province));
            sm.req({
                url: 'json/' + province + '.json',
                type: 'get',
                done: function (data) {
                    echarts.registerMap(province, data);

                    if (province == 'china_full') {
                        $('#fanhui').addClass('hide');
                    } else {
                        $('#fanhui').removeClass('hide');
                    }


                    myChart.setOption({
                        // title: {
                        //     text: '请选择省份',
                        //     subtext: '点击进入'
                        // },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}<br/>{c} (景区)'
                        },
                        toolbox: {
                            show: false,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                dataView: {
                                    readOnly: false
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 10,
                            // text: ['High', 'Low'],
                            realtime: false,
                            calculable: false,
                            show: false,
                            inRange: {
                                color: ['lightskyblue', 'yellow', 'orangered']
                            }
                        },
                        series: [{
                            type: 'map',
                            mapType: province, // 自定义扩展图表类型
                            zoom: 1.2, //当前视角的缩放比例
                            roam: true, //是否开启平游或缩放
                            label: {
                                show: province === 'china_full' ? false : true
                            },
                            data: msg
                        }]
                    })
                }
            })
            myChart.on('click', function (params) {
                // 在用户点击后控制台打印数据的名称
                if (province === 'china_full') {
                    getMap(params.data.code);
                    getTicketList(params.data.code, 1);
                    getNoticeList(params.data.code);
                } else {
                    window.location.href = "map/wx/index.html?cityname=" + params.data.name + "&citycode=" + params.data.code;
                }
            });
        }
        var district = null;
        var polygons = [];

        function drawBounds(name, map) {
            //加载行政区划插件
            if (!district) {
                //实例化DistrictSearch
                var opts = {
                    subdistrict: 0, //获取边界不需要返回下级行政区
                    extensions: 'all', //返回行政区边界坐标组等具体信息
                    level: 'city' //查询行政级别为 市
                };
                district = new AMap.DistrictSearch(opts);
            }
            //行政区查询
            district.setLevel('city')
            district.search(name, function (status, result) {
                map.remove(polygons) //清除上次结果
                polygons = [];
                var bounds = result.districtList[0].boundaries;
                if (bounds) {
                    for (var i = 0, l = bounds.length; i < l; i++) {
                        //生成行政区划polygon
                        var polygon = new AMap.Polygon({
                            strokeWeight: 1,
                            path: bounds[i],
                            fillOpacity: 0.4,
                            fillColor: '#80d8ff',
                            strokeColor: '#0091ea'
                        });
                        polygons.push(polygon);
                    }
                }
                map.add(polygons)
                map.setFitView(polygons); //视口自适应
            });
        }
        getTicketList(0, 0);

        function getTicketList(areaCode, type) {
            sm.req({
                url: '/common/getAreaProList',
                data: {
                    areaCode: areaCode,
                    type: type
                },
                done: function (res) {
                    if (res.code == 200) {
                        if (res.data.length > 0) {
                            res.fileUrl = fileUrl;
                            let html = template("ticket_tpl", res);
                            $("#ticketList").html(html);
                        } else {
                            $("#ticketList").html(null);
                        }
                    }
                }
            });
        }
        getNoticeList(0);

        function getNoticeList(areaCode) {
            sm.req({
                url: '/common/getNoticeList',
                data: {
                    areaCode: areaCode,
                    page: 1,
                    limit: 10
                },
                done: function (res) {
                    if (res.code == 200) {
                        if (res.data.length > 0) {
                            let html = template('notice_tpl', res);
                            $("#noticeWr").html(html);
                            $("#noticeShow").show();
                            $(".txtMarquee-top").slide({
                                mainCell: ".bd ul",
                                autoPlay: true,
                                effect: "topMarquee",
                                vis: 2,
                                interTime: 100
                            });
                        } else {
                            $("#noticeShow").hide();
                        }
                    }
                }
            });
        }
    </script>
</body>

</html>